<template>
    <div>
        <div class="patients-info">
            <div class="icon-div clearfix">
                <span class="icon-num">16</span>
                <img class="icon-img" src="../../../static/img/icon-.png" alt="" srcset="">
            </div>
            <img class="patients-info-pic" :src="$route.query.imgPath" alt="">
            <div class="patients-info-hec">
                <span class="patients-info-name">{{$route.query.name}}<em v-if="info.id > 0">（{{info.name}}）</em></span>
                <span class="patients-info-phone">{{info.tel}}</span>
                <span class="patients-info-beizhu">{{info.remark}}</span>
            </div>
        </div>
        <ul class="patients-ul clearfix b-g-f">
            <router-link tag="li" :to="{name:'checklist'}" class="clearfix patients-li">
                <img class="patients-img" src="../../../static/img/baogao_huaban.png" alt="">
                <em class="patients-em">
                    自查报告
                </em>
            </router-link>
            <router-link v-if="from==undefined" tag="li" :to="{name:'health',query:{id:id}}" class="clearfix patients-li">
                <img class="patients-img1" src="../../../static/img/d-dangan.png" alt="">
                <em class="patients-em">
                    健康档案
                </em>
            </router-link>
            <router-link tag="li" :to="{name:'home'}" class="clearfix patients-li">
                <img class="patients-img" src="../../../static/img/d-zicha.png" alt="">
                <em class="patients-em">
                    家庭自查
                </em>
            </router-link>
            <router-link v-if="from" tag="li" :to="{name:'health',query:{healthTitle:'follow',id:id}}" class="clearfix patients-li">
                <img class="patients-img1" src="../../../static/img/yisuifang.png" alt="">
                <em class="patients-em">
                    随访记录
                </em>
            </router-link>
            <router-link :to="{name:'remind',query:{id:id}}" tag="li" class="clearfix patients-li">
                <img class="patients-img2" src="../../../static/img/d-yuyue.png" alt="">
                <em class="patients-em">
                    预约提醒
                </em>
            </router-link>
        </ul>
        <ul class="patients-ul clearfix b-g-f patients-other">
            <router-link :to="{name:'patientsOrder',query:{id:id}}" tag="li" class="clearfix patients-li">
                <img class="patients-img4" src="../../../static/img/d-order.png" alt="">
                <em class="patients-em">
                    订单列表
                </em>
            </router-link>
        </ul>
        <ul class="patients-ul clearfix b-g-f patients-other">
            <router-link tag="li" :to="{name:'note',query:{id:id}}" class="clearfix patients-li">
                <img class="patients-img5" src="../../../static/img/d-shezhi.png" alt="">
                <em class="patients-em">
                    设置备注
                </em>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            from:this.$route.query.follow,
            id:this.$route.query.id,
            info:{}
        }
    },
    mounted(){
        this.getPatientRemark()
    },
    methods:{
        // 患者详情
        getPatientRemark(){
            this.$api.dietitian.getPatientRemark({id:this.id}).then(resp=>{
                if(resp.code == 1){
                    this.info = resp.data
                }
            })
        },
        link(){
            if(this.$route.query.patientsTitle){
                this.$router.push({
                    name:'dietitian'
                })
            }else{
                this.$router.push({
                    name:'patients'
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.patients-info{
    background-color: #5ca1ee;
    min-height: 388px;
    padding-top: 117px;
    padding-left: 40px;
    z-index: 0;
    .icon-div{
        font-size: 38px;
        line-height: 35px;
        color: #fff;
        margin-top: -70px;
        padding-bottom: 30px;
        .icon-img{
            width: 32px;
            vertical-align: middle;
            height: 36px;
            float: right;
        }
        .icon-num{
            height: 36px;
            line-height: 45px;
            padding-right: 20px;
            float: right;
            padding-left: 10px;
        }
    }
    .patients-info-pic{
        width: 205px;
        height: 205px;
        border-radius: 50%;
        float: left;
    }
    .patients-info-hec{
        color: #fff;
        margin-left: 250px;
        span{
            line-height: 60px;
            display: block;
        }
        .patients-info-name{
            padding-top: 20px;
            font-size: 44px;
            em{
                font-size: 34px;
            }
        }
        .patients-info-phone{
            font-size: 36px;
        }
        .patients-info-beizhu{
            font-size: 32px;
        }
    }
}
.patients-ul{
    z-index: 99;
    margin: -120px 40px 30px;
    border-radius: 20px;
    .patients-li{
        padding: 40px 0;
        margin: 0 30px;
        background-image: url('../../../static/img/you.png');
        background-repeat: no-repeat;
        background-position: center right 30px;
        background-size: 20px;
        border-bottom: solid 2px #f5f5f5;
        height: 60px;
        overflow: hidden;
        .patients-img{
            width: 42px;
            float: left;
        }
        .patients-img1{
            width: 50px;
            float: left;
            margin-top: 7px;
        }
        .patients-img2{
            width: 50px;
            float: left;
        }
        .patients-img4{
            width: 52px;
            float: left;
        }
        .patients-img5{
            width: 52px;
            float: left;
        }
        .patients-em{
            float: left;
            line-height: 65px;
            padding-left: 30px;
            color: #4d4d4d;
            font-size: 38px;
        }
    }
    .patients-li:last-child{
        border-bottom: none;
    }
}
.patients-other{
    margin-top: 20px;
}
</style>
